<template>
	<view class="self-edit">
		
		<view class="top">
			<uni-icons @click="toBackPage" style="margin-left: 30rpx;" type="left" size="28" color="#909090"></uni-icons>
		</view>
		
		<view class="avatar">
			<image mode="aspectFill" @click="changeAvatar" style="width: 150rpx;height: 150rpx;border-radius: 50%;"
				:src="userInfo.avatar"></image>
			<view style="margin-top: 20rpx;color: #5D9FFF;">点击更换头像</view>
		</view>
		<view class="info">
			<view class="title">账号信息</view>
			<view class="info-card">
				<view class="info-item">
					<view class="label">昵称:</view>
					<view class="value">{{userInfo.nickname}}</view>
					<view class="edit" @click="toEditNickname">
						<uni-icons type="right" size="20" color="#2c2c2c"></uni-icons>
					</view>
				</view>
				<view class="info-item">
					<view class="label">手机号:</view>
					<view class="value">{{userInfo.tel}}</view>
					<view class="edit" @click="toEditPhone">
						<uni-icons v-if="!userInfo.tel" type="right" size="20" color="#2c2c2c"></uni-icons>
					</view>
				</view>
				<view class="info-item">
					<view class="label">账号:</view>
					<view class="value">{{userInfo.account}}</view>
					<view class="edit" @click="toEditAccount">
						<uni-icons type="right" size="20" color="#2c2c2c"></uni-icons>
					</view>
				</view>
				<view class="info-item">
					<view class="label">密码:</view>
					<view class="value">******</view>
					<view class="edit" @click="toEditPassword">
						<uni-icons v-if="!userInfo.phone" type="right" size="20" color="#2c2c2c"></uni-icons>
					</view>
				</view>
				<view class="info-item">
					<view class="label">微信绑定:</view>
					<view class="value">{{userInfo.unionId == null ? "未绑定" : "已绑定"}}</view>
					<view class="edit">
						<uni-icons v-if="!userInfo.phone" type="right" size="20" color="#2c2c2c"></uni-icons>
					</view>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="title">学校信息</view>
			<view class="info-card">
				<view v-if="userInfo.schoolId">
					<view class="info-item" @click="toEditSchool">
						<view class="label">学校：</view>
						<view class="value">{{ userInfo.schoolName }}</view>
						<view class="edit">
							<uni-icons type="right" size="20" color="#2c2c2c"></uni-icons>
						</view>
					</view>
					<view class="info-item">
						<view class="label">专业：</view>
						<view class="value">{{ userInfo.speciality ? userInfo.speciality : '暂未加入'}}</view>
						<view class="edit">
						</view>
					</view>
					<view class="info-item" @click="toEditClassTeam">
						<view class="label">班级：</view>
						<view class="value">{{ userInfo.classTeamName ? userInfo.classTeamName : '暂未加入' }}</view>
						<view class="edit">
							<uni-icons type="right" size="20" color="#2c2c2c"></uni-icons>
						</view>
					</view>
				</view>
				<view v-else>
					<view style="display: flex;flex-direction: row;padding: 40rpx;">
						<view>您还未加入任何学校</view>
						<view style="color: #2a74eb;margin-left: 20px" @click="toEditSchool">点击前往</view>
					</view>
				</view>
			</view>
		</view>
		
		<!-- #ifdef MP-WEIXIN -->
		<view style="display: flex;flex-direction: row;justify-content: center;margin-top: 40rpx;font-size: 120%;font-weight: bold;margin-bottom: 200rpx;"
			@click="logout()">重新登录</view>
		<!-- #endif -->
		
		<!-- #ifndef MP-WEIXIN -->
		<view style="display: flex;flex-direction: row;justify-content: center;margin-top: 40rpx;font-size: 120%;font-weight: bold;margin-bottom: 200rpx;"
			@click="logout()">退出登录</view>
		<!-- #endif -->
		


		
		<uni-popup ref="editNickname">
			<view class="popup">
				<view class="content">
					<uni-forms>
						<uni-forms-item label="昵称">
							<uni-easyinput placeholder="昵称" v-model="userInfo.nickname">
							</uni-easyinput>
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="options">
					<view class="popup-button cancel" @click="cancelEditNickname()">取消</view>
					<view class="popup-button submit" @click="commitEditNickname()">提交</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="editPhone">
			<view class="popup">
				<view class="content">
					<uni-forms>
						<uni-forms-item label="手机号">
							<uni-easyinput placeholder="手机号" v-model="userInfo.phone">
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="验证码">
							<view style="display: flex;flex-direction: row;width: 100%;
							height: 100%;align-items: center;padding-left: 20rpx;padding-right: 20rpx;
							justify-content: space-between;border-radius: 10rpx;border: 0.5rpx solid #dddddd;">
								<input class="uni-input" placeholder="请输入验证码" v-model="userInfo.code"
									style="font-size: 28rpx;" />
								<view>
									<button class="line-blue"
										style="font-size: 20rpx;height: 40rpx;display: flex;padding: 0;width: 80rpx;flex-direction: row;justify-content: center;align-items: center;"
										:class="smsCountDown <= 0 ? 'get-sms':'disabled'" :disabled="!isSendSMSEnable"
										@click="onSMSSend">
										{{ getSendBtnText }}</button>
								</view>
							</view>
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="options">
					<view class="popup-button cancel" @click="cancelEditPhone()">取消</view>
					<view class="popup-button submit" @click="commitEditPhone()">提交</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="editAccount">
			<view class="popup">
				<view class="content">
					<uni-forms>
						<uni-forms-item label="账号">
							<uni-easyinput placeholder="账号" v-model="userInfo.account">
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="手机号">
							<uni-easyinput placeholder="手机号" v-model="userInfo.phone">
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="验证码">
							<view style="display: flex;flex-direction: row;width: 100%;
							height: 100%;align-items: center;padding-left: 20rpx;padding-right: 20rpx;
							justify-content: space-between;border-radius: 10rpx;border: 0.5rpx solid #dddddd;">
								<input class="uni-input" placeholder="请输入验证码" v-model="userInfo.code"
									style="font-size: 28rpx;" />
								<view>
									<button class="line-blue"
										style="font-size: 20rpx;height: 40rpx;display: flex;padding: 0;width: 80rpx;flex-direction: row;justify-content: center;align-items: center;"
										:class="smsCountDown <= 0 ? 'get-sms':'disabled'" :disabled="!isSendSMSEnable"
										@click="onSMSSend">
										{{ getSendBtnText }}</button>
								</view>
							</view>
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="options">
					<view class="popup-button cancel" @click="cancelEditAccount()">取消</view>
					<view class="popup-button submit" @click="commitEditAccount()">提交</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="editPassword">
			<view class="popup">
				<view class="content">
					<uni-forms labelWidth="140rpx">
						<uni-forms-item label="密码">
							<uni-easyinput v-model="userInfo.password" show-password placeholder="密码">
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="再次输入">
							<uni-easyinput v-model="repeatPassword" show-password placeholder="密码">
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="手机号">
							<uni-easyinput placeholder="手机号" v-model="userInfo.phone">
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="验证码">
							<view style="display: flex;flex-direction: row;width: 420rpx;
							height: 100%;align-items: center;padding-left: 20rpx;padding-right: 20rpx;
							justify-content: space-between;border-radius: 10rpx;border: 0.5rpx solid #dddddd;">
								<input class="uni-input" placeholder="请输入" v-model="userInfo.code"
									style="font-size: 28rpx;" />
								<view>
									<button class="line-blue"
										style="font-size: 20rpx;height: 40rpx;display: flex;padding: 0;width: 80rpx;flex-direction: row;justify-content: center;align-items: center;"
										:class="smsCountDown <= 0 ? 'get-sms':'disabled'" :disabled="!isSendSMSEnable"
										@click="onSMSSend">
										{{ getSendBtnText }}</button>
								</view>
							</view>
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="options">
					<view class="popup-button cancel" @click="cancelEditPassword()">取消</view>
					<view class="popup-button submit" @click="commitEditPassword()">提交</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="editIdentity">
			<view class="popup">
				<view class="content">
					<uni-forms labelWidth="140rpx">
						<uni-forms-item label="姓名">
							<uni-easyinput v-model="userInfo.name" placeholder="姓名">
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="身份证号">
							<uni-easyinput v-model="userInfo.identity" placeholder="身份证号">
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="性别">
							<uni-data-checkbox v-model="userInfo.gender" :localdata="genderOptions" @change="change">
							</uni-data-checkbox>
						</uni-forms-item>
						<uni-forms-item label="手机号">
							<uni-easyinput placeholder="手机号" v-model="userInfo.tel">
							</uni-easyinput>
						</uni-forms-item>
						<uni-forms-item label="验证码">
							<view style="display: flex;flex-direction: row;width: 440rpx;
						height: 100%;align-items: center;padding-left: 20rpx;padding-right: 20rpx;border-radius: 10rpx;border: 0.5rpx solid #dddddd;">
								<input class="uni-input" placeholder="请输入验证码" v-model="userInfo.code"
									style="font-size: 28rpx;width: 300rpx;" />
								<view>
									<button class="line-blue"
										style="font-size: 20rpx;height: 40rpx;display: flex;padding: 0;width: 80rpx;flex-direction: row;justify-content: center;align-items: center;"
										:class="smsCountDown <= 0 ? 'get-sms':'disabled'" :disabled="!isSendSMSEnable"
										@click="onSMSSend">
										{{ getSendBtnText }}</button>
								</view>
							</view>
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="options">
					<view class="popup-button cancel" @click="cancelEditIdentity()">取消</view>
					<view class="popup-button submit" @click="commitEditIdentity()">确定</view>
				</view>
			</view>
		</uni-popup>

		<uni-popup ref="editSchool">
			<view class="popup">
				<view class="content">
					<uni-forms  labelWidth="140rpx">
						<uni-forms-item label="学校列表">
							<view style="height: 500rpx;overflow-y: scroll;margin-top: 5rpx;">
								<uni-data-checkbox mode="list" icon="right" v-model="userInfo.schoolId"
								:localdata="schoolList" @change="changeSchool"></uni-data-checkbox>
							</view>
						</uni-forms-item>
					</uni-forms>
				</view>
				<view class="options">
					<view class="popup-button cancel" @click="cancelEditSchool()">取消</view>
					<view class="popup-button submit" @click="commitEditSchool()">确定</view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="editClassTeam">
			<view class="popup">
				<view class="content" style="display: flex;flex-direction: column;">
					<view style="margin-bottom: 40rpx;">申请加入班级</view>
					<uni-easyinput placeholder="请输入邀请码" v-model="inviteCode"></uni-easyinput>
					<view style="margin-top: 40rpx;font-size: 28rpx;color: gray;">如果没有邀请码请向班委问询</view>
					<view v-if="userInfo.classTeamId" style="margin-top: 20rpx;font-size: 28rpx;color: gray;margin-bottom: 40rpx;">加入新班级后将退出原班级团队</view>
				</view>
				<view class="options">
					<view class="popup-button cancel" @click="cancelEditClassTeam()">取消</view>
					<view class="popup-button submit" @click="commitEditClassTeam()">确定</view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import UploadOss from '@/common/util/UploadOss';
	import {
		ACCESS_TOKEN,
		USER_NAME,
		USER_INFO
	} from "@/common/util/constants";
	export default {
		data() {
			return {
				userInfo: {},
				repeatPassword: "",
				inviteCode:"",

				schoolList: [{
					text: "郑州大学",
					value: 1
				}, {
					text: "河南工业大学",
					value: 2
				}],
				genderOptions: [{
					"value": 0,
					"text": '女'
				}, {
					"value": 1,
					"text": '男'
				}, ],
				smsCountDown: 0, // 验证码倒计时
			};
		},
		computed: {
			isSendSMSEnable() {
				return this.smsCountDown <= 0 && this.userInfo.phone && this.userInfo.phone.length > 4;
			},
			getSendBtnText() {
				if (this.smsCountDown > 0) {
					return this.smsCountDown + '秒后';
				} else {
					return '发送';
				}
			},
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			getUserInfo() {
				this.$api.getUserInfo().then(res => {
					this.userInfo = res.data;
				})
			},
			logout() {
				uni.setStorageSync(ACCESS_TOKEN, '')
				this.modalName = ''
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},


			changeAvatar() {
				uni.chooseImage({
					count: 9, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						UploadOss.uploadFile(res).then(res => {
							this.$api.updateInfo({
								avatar:res
							}).then(() => {
								this.getUserInfo()
							})
						})
					}
				});
			},

			toEditNickname() {
				this.$refs.editNickname.open()
			},
			commitEditNickname() {
				this.$api.updateInfo(this.userInfo).then(() => {
					this.getUserInfo()
					this.$refs.editNickname.close()
				})

			},
			cancelEditNickname() {
				this.$refs.editNickname.close()
			},





			toEditPassword() {
				this.$refs.editPassword.open()
			},
			commitEditPassword() {
				if (this.userInfo.password == null) {
					uni.showToast({
						icon:'error',
						title:'请输入密码',
						duration:500
					})
					return
				}
				if (this.userInfo.password.length < 8 || this.userInfo.password.length > 13) {
					uni.showToast({
						icon:'error',
						title:'密码格式错误',
						duration:500
					})
					return
				}
				if (this.userInfo.password !== this.repeatPassword) {
					uni.showToast({
						icon:'error',
						title:'密码不一致',
						duration:500
					})
					return;
				}
				this.$api.bindPassword({
					code: this.userInfo.code,
					password: this.userInfo.password,
					phone: this.userInfo.phone
				}).then(() => {
					this.getUserInfo()
					this.$refs.editPassword.close()
				})
			},
			cancelEditPassword() {
				this.$refs.editPassword.close()
			},



			toEditPhone() {
				this.$refs.editPhone.open()
			},
			toEditAccount() {
				this.$refs.editAccount.open()
			},
			commitEditPhone() {
				this.$api.bindWxAndPhone({
					code: this.userInfo.code,
					phone: this.userInfo.phone
				}).then(() => {
					this.getUserInfo()
					this.$refs.editPhone.close()
				})
			},
			commitEditAccount() {
				this.$api.bindAccount({
					account: this.userInfo.account,
					code: this.userInfo.code,
					phone: this.userInfo.phone
				}).then(() => {
					this.getUserInfo()
					this.$refs.editAccount.close()
				})
			},
			cancelEditPhone() {
				this.$refs.editPhone.close()
			},



			toEditIdentity() {
				this.$refs.editIdentity.open()
			},
			commitEditIdentity() {
				this.$api.auth(this.userInfo).then(() => {
					this.getUserInfo()
					this.$refs.editIdentity.close()
				})
			},
			cancelEditIdentity() {
				this.$refs.editIdentity.close()
			},

			toEditSchool() {
				this.$refs.editSchool.open()
			},
			
			
			changeSchool(e){
				this.userInfo.schoolId = e.detail.data.value
				this.userInfo.schoolName = e.detail.data.text
			},
			
			commitEditSchool() {
				this.$api.bindSchool({
					id: this.userInfo.schoolId
				}).then(() => {
					this.getUserInfo()
					this.$refs.editSchool.close()
				})
			},
			cancelEditSchool() {
				this.$refs.editSchool.close()
			},
			
			toEditClassTeam(){
				this.$refs.editClassTeam.open()
			},
			
			commitEditClassTeam() {
				this.$api.bindClassTeam({
					inviteCode: this.inviteCode
				}).then(() => {
					uni.showToast({
						icon:'success',
						title:"成功"
					})
					this.getUserInfo()
					this.$refs.editClassTeam.close('bottom')
				})
			},
			cancelEditClassTeam() {
				this.$refs.editClassTeam.close('bottom')
			},


			toBackPage(){
				uni.navigateBack()
			},



			onSMSSend() {
				if (this.smsCountDown > 0)
					return;
				let smsParams = {
					phone: this.userInfo.phone,
					email: ""
				};
				let checkPhone = new RegExp(/^1([3-9])\d{9}$/);
				if (!smsParams.phone || smsParams.phone.length === 0) {
					this.$message.error('手机号不能为空');
					return false;
				}
				if (!checkPhone.test(smsParams.phone)) {
					this.$message.error('手机号不合法');
					return false;
				}
				console.log(smsParams)
				this.$api.sendVerificationCode(smsParams)
				this.smsCountDown = 60;
				this.startSMSTimer();
			},
			startSMSTimer() {
				this.smsCountInterval = setInterval(() => {
					this.smsCountDown--;
					if (this.smsCountDown <= 0) {
						clearInterval(this.smsCountInterval);
					}
				}, 1000);
			},

		}
	}
</script>

<style lang="scss">
	page {
		background: url(https://www.cdn.kxcdedu.top/image/default/D69DDD368BB44C0C87647CC0E911EA32-6-2.png) no-repeat center fixed;
		background-size: cover;
		box-sizing: border-box;
	}

	.self-edit {
		width: 750rpx;
		display: flex;
		flex-direction: column;
		
		.top {
			position: sticky;
			top: 0;
			z-index: 2;
		
		
			width: 750rpx;
			height: 80rpx;
			padding-top: 80rpx;
			
			// #ifdef H5
			padding-top: 40rpx;
			// #endif
			
			padding-bottom: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
		}

		.avatar {
			margin-top: 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
		}

		.info {
			width: 670rpx;
			margin-left: 40rpx;
			margin-top: 40rpx;
			display: flex;
			flex-direction: column;

			.title {
				font-size: 32rpx;
				font-weight: bold;
			}

			.info-card {
				display: flex;
				flex-direction: column;

				background-color: #ffffff;
				box-shadow: 0 0 10rpx 10rpx rgba(235, 235, 235, 0.2);
				border-radius: 15rpx;
				background-color: rgba(255, 255, 255, 0.65);
				margin: 20rpx 0;

				.info-item {
					padding: 20rpx 30rpx;
					height: 80rpx;
					width: 100%;
					display: flex;
					flex-direction: row;
					justify-content: space-between;
					align-items: center;

					.label {
						width: 200rpx;
						color: gray;
					}

					.value {
						width: 330rpx;
						font-weight: bold;

						/*超过范围进行隐藏不显示*/
						overflow: hidden;
						/*文本溢出, 使用省略号 */
						text-overflow: ellipsis;
						/* 以webkit盒子展示, 比较适用于webkit内核和移动端*/
						display: -webkit-box;
						/*限制块容器显示的文本行数, 按照你的需求设置*/
						-webkit-line-clamp: 1;
						/*盒子的方向, 垂直、水平等*/
						-webkit-box-orient: vertical;
						/*文字换行, 可以在单词内断*/
						word-wrap: break-word;
					}

					.edit {
						width: 100rpx;
						height: 30rpx;
					}
				}
			}
		}
	}

	.popup {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;

		width: 600rpx;
		padding: 30rpx;
		background-color: #fff;
		border-radius: 20rpx;
		min-height: 400rpx;

		.content {
			margin-top: 40rpx;
			width: 100%;
		}

		.options {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			margin: 20rpx 0;

			.popup-button {
				width: 160rpx;
				text-align: center;
				height: 60rpx;
				line-height: 60rpx;
				border-radius: 50rpx;
				color: #ffffff;
			}

			.cancel {
				background-color: #ADAAAA;
			}

			.submit {
				background-color: #619DFF;
				margin-left: 110rpx;
			}
		}
	}
</style>
